<template>
	<view>
		<view class="sun-nav-title">
			<view class="sun-nav-content">
				<u-icon name="arrow-left" size="20" @click="bask"></u-icon>
				<image src="@/static/logo/i18n_icon.png" style="width: 16px;height: 19px;"></image>
			</view>
		</view>
		<view class="sun-index">
			<view style="position: relative;height: 380rpx;">
				<view style="display: flex;justify-content: center;">
					<view class="sun-logo-box" style="position: absolute;">
						<image class="sun-icon-img" src="@/static/logo/beijin2.png" />
					</view>
				</view>
			</view>
			<view style="position: relative;">
				<view class="sun-logo-denglu">
					<view class="sun-login-box">
						<view class="sun-login-text">
							<text>{{ t('register.forgotName') }}</text>
						</view>

					</view>
					<view class="sun-login-box">
						<view class="sun-label">
							<text class="label-text">{{ t('login.mobile') }}</text>
						</view>
						<view class="sun-input-box">
							<input v-model="telnumber" type="text" :placeholder="t('login.enterMobile')"
								placeholder-class="placeholder-class" />
							<!-- <image @click="telnumber=''" class="close-icon" src="@/static/imgs/close_icon.png" /> -->
						</view>
					</view>
					<view class="sun-login-box">
						<view class="sun-label">
							<text class="label-text">{{ t('register.code') }}</text>
						</view>
						<view class="sun-input-box">
							<input v-model="msgcode" type="text" :placeholder="t('register.inputCode')"
								placeholder-class="placeholder-class" />
							<view>
								<view class="butcode" @tap="sendcode" v-if="!codesetime">
									<text v-if="mscodetype== 1" style="font-size: 14px;color: rgba(41, 63, 204, 1);">{{t('register.codeText')}}</text>
									<text v-else-if="mscodetype == 2">重新获取</text>
								</view>
								<view class="butcode" v-else>
									<text style="font-size: 14px;color: rgba(41, 63, 204, 1);">{{mscodenumber}} s</text>
								</view>
							</view>
						</view>
					</view>
					<view class="sun-login-box">
						<view class="sun-label">
							<text class="label-text">{{ t('login.password') }}</text>
						</view>
						<view class="sun-input-box">
							<u-input v-model="newpassword" password border="none"
								:placeholder="t('login.enterPassword')" v-if="imageType">
								<template #suffix>
									<image src="../../static/imgs/yanjin1.png" style="width: 18px;height: 12px;"
										v-if="imageType" @click="tabImage"></image>
									<image src="../../static/imgs/yanjin2.png" style="width: 18px;height: 12px;"
										v-if="!imageType" @click="tabImage"></image>
								</template>
							</u-input>
							<u-input v-model="newpassword" border="none" v-if="!imageType"
								:placeholder="t('login.enterPassword')">
								<template #suffix>
									<image src="../../static/imgs/yanjin1.png" style="width: 18px;height: 12px;"
										v-if="imageType" @click="tabImage"></image>
									<image src="../../static/imgs/yanjin2.png" style="width: 18px;height: 12px;"
										v-if="!imageType" @click="tabImage"></image>
								</template>
							</u-input>
						</view>
					</view>
					<view class="sun-login-box">
						<view class="sun-label">
							<text class="label-text">{{ t('register.rebuildPassword') }}</text>
						</view>
						<view class="sun-input-box">
							<u-input v-model="enterpassword" password border="none"
								:placeholder="t('login.enterPassword')" v-if="imageType2">
								<template #suffix>
									<image src="../../static/imgs/yanjin1.png" style="width: 18px;height: 12px;"
										v-if="imageType2" @click="tabImage2"></image>
									<image src="../../static/imgs/yanjin2.png" style="width: 18px;height: 12px;"
										v-if="!imageType2" @click="tabImage2"></image>
								</template>
							</u-input>
							<u-input v-model="enterpassword" border="none" v-if="!imageType2"
								:placeholder="t('login.enterPassword')">
								<template #suffix>
									<image src="../../static/imgs/yanjin1.png" style="width: 18px;height: 12px;"
										v-if="imageType2" @click="tabImage2"></image>
									<image src="../../static/imgs/yanjin2.png" style="width: 18px;height: 12px;"
										v-if="!imageType2" @click="tabImage2"></image>
								</template>
							</u-input>

						</view>
					</view>
					<view class="login-btn-box">
						<view class="login-btn" @click="setpassword" v-if="showbutton">{{ t('register.next') }}</view>
						<view class="login-btn" style="opacity: 0.4;" v-else>{{ t('register.next') }}</view>
					</view>
				</view>

			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		smsSend
	} from '@/api/login/login.js'
	import {
		forgetPwd,

	} from '@/api/setuserinfo/setuserinfo.js'
	import {
		useI18n
	} from "vue-i18n";
	const {
		t
	} = useI18n()
	import {
		ref,
		computed
	} from "vue";
	const telnumber = ref('')
	const test_reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
	const msgcode = ref('')
	const newpassword = ref('')
	const enterpassword = ref('')
	const mscodetype = ref(1)
	const codesetime = ref(false)
	const mscodenumber = ref(0)
	const imageType = ref(true)
	const imageType2 = ref(true)
	const showbutton = computed(() => {
		return !!telnumber.value && !!msgcode.value && !!newpassword.value && !!enterpassword.value
	})


	const sendcode = () => {
		if (telnumber.value != '') {
			if (!test_reg.test(telnumber.value)) {
				uni.showToast({
					title: '请填写正确的手机号',
					icon: 'none',
					duration: 1000
				})
				return
			}
		} else {
			uni.showToast({
				title: '请填写手机号',
				icon: 'none',
				duration: 1000
			})
			return
		}
		mscodenumber.value = 60
		codesetime.value = true
		mscodetype.value = 2
		let data = {
			type: 2,
			mobile: telnumber.value
		}
		smsSend(data).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: res.msg,
					duration: 1500,
					icon: 'success'
				})
			}
		}).catch(err => {
			console.log('err', err)
			uni.showToast({
				title: err.msg,
				duration: 1500,
				icon: 'error'
			})
		})
		let timer = setInterval(() => {
			mscodenumber.value--
			if (mscodenumber.value == 0) {
				codesetime.value = false
				clearInterval(timer)
			}
		}, 1000)
	}

	function tabImage() {
		imageType.value = !imageType.value
	}

	function tabImage2() {
		imageType2.value = !imageType2.value
	}
	const setpassword = () => {
		let data = {
			mobile: telnumber.value,
			verify_code: msgcode.value,
			password: newpassword.value,
			re_password: enterpassword.value
		}
		forgetPwd(data).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: res.msg,
					duration: 1500,
					icon: 'success'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		}).catch(err => {
			console.log('err', err)
			uni.showToast({
				title: err.msg,
				duration: 1500,
				icon: 'error'
			})
		})
	}

	function bask() {
		uni.navigateBack()
	}
</script>

<style scoped>
	page {
		background: linear-gradient(180deg, rgba(239, 246, 255, 1) 0%, rgba(242, 244, 247, 1) 100%);
	}

	.sun-logo-box {
		display: flex;
		margin-top: 126rpx;
		justify-content: center;
		align-items: center;
	}

	.sun-logo {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 180rpx;
		height: 180rpx;
		border-radius: 15rpx;
		background-color: #12C8B9;
		box-shadow: 0rpx 0rpx 30rpx rgba(18, 200, 185, 0.5);
	}

	.sun-nav-title {
		height: 100px;
		display: flex;
		align-items: center;
		padding: 0 40rpx;

	}

	.sun-nav-content {
		display: flex;
		flex: 1;
		justify-content: space-between;
	}

	.sun-logo-denglu {
		background-color: #fff;
		margin: 40rpx;
		border-radius: 28rpx;
	}

	.close-icon {
		width: 36rpx;
		height: 34rpx;
	}

	.sun-icon-img {
		width: 500rpx;
		height: 500rpx;
	}

	.sun-login-box {
		padding: 20rpx 60rpx;
	}

	.sun-login-text {
		font-size: 48rpx;
		font-weight: 700;
		text-align: center;
	}

	.sun-label {
		display: flex;
		align-items: center;
	}

	.label-text {
		margin-left: 16rpx;
		font-weight: 500;
		color: #272e2d;
		font-size: 30rpx;
	}

	.sun-input-box {
		display: flex;
		align-items: center;
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
		padding: 0px 10rpx;
	}

	.sun-input-box input {
		flex: 1;
	}

	.placeholder-class {
		font-size: 30rpx;
		color: #C0C0C0;
	}

	.sun-tip {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 68rpx;
	}

	.sun-tip-text {
		color: rgba(18, 39, 167, 1);
		font-size: 13px;
	}

	.login-btn-box {
		width: 670rpx;
		padding: 50rpx 60rpx;
	}

	.login-btn-agr {
		position: absolute;
		bottom: 129rpx;
		width: 750rpx;
		padding: 50rpx 68rpx 0rpx;
		display: flex;
		justify-content: center;
	}

	.login-btn {
		height: 82rpx;
		border-radius: 41rpx;
		background: linear-gradient(90deg, rgba(77, 110, 223, 1) 0%, rgba(19, 40, 169, 1) 100%);
		box-shadow: -1px 12px 11px 0px rgba(77, 110, 223, 0.4);
		text-align: center;
		line-height: 82rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}
</style>